<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圣诞节快乐！！！</title>
    <style>
        @media screen and (orientation: landscape) {
            body {
                width: 100%;
                height: 100%;
            }
        }

        body {
            background-color: #330a0a;
        }

        .card {
            width: 500px;
            /* height: 300px; */
            margin: 100px auto;
            /* background-color: #fff; */
            position: relative;
        }

        .back {
            border-radius: 20px;
            transform-origin: bottom;
            transition: 1s;
            box-shadow: 0px 0px 30px 20px rgba(255, 255, 255, 0.5);
        }

        .tree {
            width: 40%;
            position: absolute;
            top: 10px;
            left: 50px;
            transform-origin: bottom;
            transition: 1s;
        }

        .text {
            opacity: 0;
            position: absolute;
            top: 160px;
            color: #ffffff;
            transition: 1s;
            text-shadow: 0 0 10px rgb(244, 244, 244), 0 0 20px rgb(111, 41, 41), 0 0 30px red, 0 0 40px red;
        }

        .card:hover .back {
            transform: perspective(1000px) rotateX(30deg) skewX(-20deg)
        }

        .card:hover .tree {
            transform: scale(1.1)
        }

        .card:hover .text {
            opacity: 1;
            top: 280px;
        }

        .snow-container {
            overflow: hidden;
            width: 100%;
            background-color: red;
            max-width: 100%;
            height: 100%;
            pointer-events: none;
            /*阻止任何事件*/
        }

        .snow {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            /*垂直、水平居中*/
            margin: auto;
            transform: translate(0, -100%);
            animation: snowing infinite linear;
            pointer-events: none;
        }

        .foreground {
            animation-duration: 25s;
            background-image: url('https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-large-075d267ecbc42e3564c8ed43516dd557.png');
        }

        .foreground.layer {
            animation-delay: 12.5s;
            /*推迟时间是总时间/2*/

        }

        .medium {
            animation-duration: 35s;
            background-image: url('https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-medium-0b8a5e0732315b68e1f54185be7a1ad9.png');
        }

        .medium.layer {
            animation-delay: 17.5s;
        }

        .background {
            animation-duration: 45s;
            background-image: url('https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-small-1ecd03b1fce08c24e064ff8c0a72c519.png');

        }

        .background.layer {
            animation-delay: 22.5s;
        }

        @keyframes snowing {
            100% {
                transform: translate(15%, 100%);
            }
        }
    </style>
</head>

<body>
    <div class="card">
        <img src="./img//1703517213361.png" alt="" class="back">
        <img src="./img/img.png" alt="" class="tree">
        <div class="text">
            <h1>圣诞节快乐！🎁🎁🎁</h1>
            <p>Merry Chrismas🎄🎄🎄</p>
        </div>
    </div>
    <div class="snow-container">
        <div class="snow foreground"></div>
        <div class="snow foreground layer"></div> <!--延迟衔接-->
        <div class="snow medium"></div>
        <div class="snow medium layer"></div>
        <div class="snow background"></div>
        <div class="snow background layer"></div>
    </div>
</body>

</html>